import React, { memo,useEffect ,useState,useRef} from 'react'
import { useDispatch } from "react-redux";
import { Button, Card,Table,Modal ,Form,Input,message} from 'antd';
import { PlusCircleOutlined } from '@ant-design/icons';
import { reqCategoryList,reqCategoryAdd,reqCategoryUpdate } from "../../../network";
import { saveCategoryListAction } from "@/store/actionCreator";
import {PAGE_SIZE} from "@/common"

export default memo(function HjCategory(props) {
  // props state
  const [dataSource, setDataSource] = useState([].reverse());
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [modalType, setIsModalType] = useState(0);  //对话框类型：0：添加对话框 1：更新对话框
  const [modalCurrentValue, setModalCurrentValue] = useState('');  //用于修改分类数据回显的数据 
  const [modalCurrentId, setModalCurrentId] = useState('');  //用于修改分类数据回显的数据 
  const [isLoading, setIsLoading] = useState(true);  //用于修改分类数据回显的数据 

  // redux hooks
  const dispatch = useDispatch()


  const formRef = useRef()
   
   // 调用请求函数
  useEffect(() => {
      getCategoryList()
      // eslint-disable-next-line
  }, []);

  // handle function
  // 发获取分类列表请求
  const getCategoryList = async()=>{
      const result = await reqCategoryList()
      setIsLoading(false)
       if(result.status ===0){
            setDataSource(result.data)
            // 将categoryList保存到redux中
            dispatch(saveCategoryListAction(result.data))
       }
    }

    // 显示添加弹窗
  const showAdd = () => {
    setModalCurrentValue('')
    setModalCurrentId('')
    setIsModalType(0)
    setIsModalVisible(true);
  };
   // 显示修改弹窗
  const showUpdate = (item) => {
    setModalCurrentValue((qw)=>{
      const item1 =item.name
      return item1
    })
    setModalCurrentId(item._id)
    setIsModalType(1)
    setIsModalVisible(true);
    
  };

  // 添加分类请求函数
  const toAdd = async(values)=>{
      const result = await reqCategoryAdd(values)
      const {data,msg,status} = result
      if(status!==0) return message.error(msg,1)
      else{
        const newDataSource =[...dataSource]
        newDataSource.unshift(data)
        setDataSource(newDataSource)
        message.success('添加成功',1)
        formRef.current.resetFields()//重置表单
         setIsModalVisible(false);
      }
  }
   // 更新分类请求函数
  const toUpdate = async(values)=>{
      const result = await reqCategoryUpdate(modalCurrentId,values.categoryName)
      const {msg,status} = result
      if(status!==0) return message.error(msg,1)
      else{
        getCategoryList() //更新数据
        message.success('更新成功',1)
        formRef.current.resetFields()//重置表单
         setIsModalVisible(false);
      }
  }
    // 确认添加
  const handleOk = () => {
    // 验证输入框数据
     formRef.current.validateFields().then((values)=>{
       if(modalType===0){
          //  调用发添加分类请求函数
          toAdd(values)
       } else{
            toUpdate(values)
       }
      
    }).catch((error)=>{
      message.error('请正确输入信息',1)
    })
     

    };
    // 取消添加
  const handleCancel = () => {
    setIsModalVisible(false);
    formRef.current.resetFields()
    
  };

    const columns = [
  {
    title: '分类名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '操作',
    // dataIndex: 'action',
    key: 'action',
    align:'center',
    width:'25%',
    render:(item)=>{
       return <Button type="link" onClick={e=>showUpdate(item)}>修改分类</Button>
  }
  }
  ];

  return (
    <div>
          <Card title="分类管理" extra={<Button type="primary" onClick={showAdd} icon={<PlusCircleOutlined/>}>添加</Button>} >
            <Table 
                  dataSource={dataSource} 
                  columns={columns} 
                  rowKey="_id"
                  bordered
                  showHeader
                  loading={isLoading}
                  pagination={{pageSize:PAGE_SIZE}}/>;
          </Card>
          {/* 添加商品的对话框 */}
           <Modal 
                title={modalType?'修改分类':'添加分类'}
                visible={isModalVisible} 
                onOk={handleOk} 
                onCancel={handleCancel}
                okText="确定"
                cancelText="取消"
                destroyOnClose //解決数据回显总是回显上一个数据的问题
                >
                  
                  <Form
                    name="categoryFormname"
                    autoComplete="off"
                    ref={formRef}
                    
                  >
                      <Form.Item
                         name="categoryName"
                          initialValue={modalCurrentValue}
                         rules={[{ required: true, message: '分类名必须输入！！' }]}
                      >
                        <Input />
                      </Form.Item>
                   </Form>
          </Modal>
    </div>
  )
})
